<script>
import { moment } from 'istrong-timeutil';
import { get } from 'istrong-axiosmodel';
import setLoading from '../../libs/loading';
import FilterPanel from '../../components/FilterPanel.vue';

import vgMap from './Map.vue';
import vgList from '../../components/ListPage.vue';

export default {
  name: 'waterloggingMain',
  components: {
    'vg-Map': vgMap,
    'vg-List': vgList,
    'right-FilterPanel': FilterPanel
  },
  data () {
    return {
      showType: 'list',//显示类型，【map、list】
      filterOpts: {
      },//筛选配置
      loading: false,
      listFields: [
        {
          fieldLabel: '站名',
          fieldName: 'name',
          fieldType: 'String',
          headerClass: 'listViewer-col-stationName listViewer-col-stationName-waterlogging',
          contentClass: 'listViewer-col-stationName listViewer-col-stationName-waterlogging'
        },
        {
          fieldLabel: '水位<span class="listViewer-header-unit">(m)</span>',
          fieldName: 'val',
          fieldType: 'Number',
          defaultLabel: '-',
          headerClass: 'listViewer-col-val listViewer-col-val-waterlogging',
          contentClass: 'listViewer-col-val listViewer-col-val-waterlogging'
        },
        {
          fieldLabel: '地区',
          fieldName: 'area_name',
          fieldType: 'String',
          defaultLabel: '-',
          headerClass: 'listViewer-col-areaName-waterlogging',
          contentClass: 'listViewer-col-areaName-waterlogging'
        }
      ],
      filterConditions: {
        timeRange: {
          beginTime: '',
          endTime: ''
        }//查询条件——时间
      },
      positionMarkerId: '',
      data: [],//站点数据
      filterPanelVisible: false,//筛选面板
      iosLock: false
    }
  },
  watch: {
    loading (val) {
      setLoading(val);
    },
    filterConditions (val) {
      this.getData();
    },
    filterPanelVisible (val) {
      this.iosLock = val;
    }
  },
  mounted () {
  },
  methods: {
    getData () {
      this.loading = true;
      let { timeRange } = this.filterConditions;

      get('waterlogging.group', {
        waterloggingGroup: {
          time: ['[',
            moment(timeRange.beginTime).format('YYYY-MM-DDTHH:mm:ss'),
            ',',
            moment(timeRange.endTime).format('YYYY-MM-DDTHH:mm:ss'), ']'].join('')
        }
      }).then(result => {
        let data = [];
        result.data.forEach(group => {
          data = data.concat(group.data || []);
        });

        // 定位中心区域
        this.positionMarkerId = 'center' // data[0].id

        this.data = data;
        this.loading = false;
      });
    },
    onShowChartInfo (data) {
      let { beginTime, endTime } = this.filterConditions.timeRange;
      this.$router.push({
        name: 'waterlogging/chart',
        query: {
          id: data.id || data._id,
          name: data.name,
          beginTime: beginTime,
          endTime: endTime
        },
        params: {
          baseInfo: data
        }
      });
    },
    onChangeShowType (type) {
      this.showType = type;
    },
    onPositionEnd () {
      this.positionMarkerId = '';
    },
    onFilterPanelState (state) {
      this.filterPanelVisible = state;
    }
  },
  created () {
    let moduleConfig = this.$AppConfig.module.waterlogging || {};
    this.showType = moduleConfig.defaultContent || 'list';
    this.filterOpts = {
      timeOpts: moduleConfig.timeOpts,
      cityOpts: moduleConfig.cityOpts
    };
  },
  beforeDestroy () {
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      if (from.path === '/waterlogging/chart' && to.params.showType) {
        vm.showType = to.params.showType;
        vm.positionMarkerId = to.params.id;
      }
    });
  }
}
</script>
<template>
  <div class="pageMain">
    <keep-alive>
      <vg-Map
        :positionMarker="positionMarkerId"
        :beginTime="filterConditions.timeRange.beginTime"
        :endTime="filterConditions.timeRange.endTime"
        :data="data"
        @changeShowType="onChangeShowType"
        @showChartInfo="onShowChartInfo"
        @setFilterConditions="onFilterPanelState"
        @positionEnd="onPositionEnd"
        v-if="showType !== 'list'"
      ></vg-Map>
      <vg-List
        :beginTime="filterConditions.timeRange.beginTime"
        :endTime="filterConditions.timeRange.endTime"
        :iosLock="iosLock"
        :data="data"
        :fields="listFields"
        @setFilterConditions="onFilterPanelState"
        @changeShowType="onChangeShowType"
        @showChartInfo="onShowChartInfo"
        v-if="showType === 'list'"
      ></vg-List>
    </keep-alive>
    <right-FilterPanel
      v-model="filterConditions"
      :visible="filterPanelVisible"
      @stateChange="onFilterPanelState"
      :timeOpts="filterOpts.timeOpts"
      :cityOpts="filterOpts.cityOpts"
    >
    </right-FilterPanel>
  </div>
</template>
<style>
.listViewer-col-areaName-waterlogging {
  min-width: 80px;
  width: 23%;
  text-align: center;
}
.listViewer-col-val-waterlogging {
  width: 21%;
}
.listViewer-col-stationName-waterlogging {
  width: 44%;
}
</style>
